<template>
  <div class="app-container">
    <el-form ref="form" size="mini" label-width="200px">
      <template v-for="cell in cells">
        <el-form-item
          :hidden="cell.column.readOnly"
          :label="cell.column.display"
          v-if="cell.column.controlType == 'date'"
          :key="cell.column.columnName"
        >
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="cell.value"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>


         <el-form-item
          :hidden="cell.column.readOnly"
          :label="cell.column.display"
          v-if="cell.column.controlType == 'switch'"
          :key="cell.column.columnName"
        >
           <el-checkbox v-model="cell.value"></el-checkbox>
        </el-form-item>

        <el-form-item
          v-else-if="cell.column.controlType == 'sysrole'"
          :key="cell.column.columnName"
          :label="cell.column.display"
        >
          <el-select v-model="cell.value" multiple placeholder="请选择">
            <el-option
              v-for="role in roles"
              :key="role.id"
              :value="role.id"
              :label="role.name"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          :hidden="cell.column.readOnly"
          v-else
          :label="cell.column.display"
          :key="cell.column.columnName"
        >
          <el-input v-model="cell.value"></el-input>
        </el-form-item>
      </template>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')"> 提交 </el-button>
        <el-button @click="onCancel"> 取消 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { datarow, edrow } from '@/api/users'
import { role, rolels } from '@/api/role'

@Component({
  name: 'sys-edrow'
})
export default class extends Vue {
  private listLoading = true
  created() {
    this.role()
    this.row()
  }

  private async onSubmit(formName: string) {
    var obj: any = {}
    var requiredLs:any=[];
    this.cells.forEach((it: any) => {
      if (it.value) {
        obj[it.column.columnName] = it.value
        if (obj[it.column.columnName] instanceof Array) {
          obj[it.column.columnName] = obj[it.column.columnName].join(',')
        }
      }else if(it.column.required&&it.column.columnName!='id'){
        requiredLs.push(it.column.display);
      }
      var otherCols = Object.keys(this.$route.query).filter(
        (it: string) => !(it == 'tableName' || it == 'id')
      )
      otherCols.forEach((k: string) => {
        obj[k] = this.$route.query[k]
      })

    })
    if(requiredLs.length>0){
      this.$alert(requiredLs.join('、')+'不能为空');
      return;
    }

    var submitData = {
      tableName: this.$route.query.tableName,
      json: JSON.stringify(obj)
    }
    const { data } = await edrow(submitData)
    this.onCancel()
  }
  private onCancel() {
    this.$router.go(-1)
  }
  private cells: any = []
  private async row() {
    const { data } = await datarow(this.$route.query)
    var ls: any[] = data.cells || []
    ls.forEach((it: any) => {
      if (it.value && it.value.toString().indexOf(',') > -1) {
        it.value = it.value.toString().split(',')
      }
    })

    this.cells = data.cells
    console.log(this.cells)
  }
  private roles: any = []
  private async role() {
    const { data } = await rolels({})
    this.roles = data
  }
}
</script>
